<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Information</title>
	<meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- <link rel="stylesheet" type="text/css" href="semantic/css/semantic.min.css"> -->
	<link rel="stylesheet" type="text/css" href="semantic/css/">
	<style type="text/css">
		*{
			font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif!important;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-collapse: collapse;
    		text-decoration: none;
    		-webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
    		user-select: none;
    		tap-highlight-color: transparent;
            -webkit-tap-highlight-color: transparent
    		border-collapse: collapse;
    		outline: none;
			font-size: 12px;
			/*background:#fff;*/
			color:#222;
			margin:0px;
			padding:0px;
		}
		html,body{
			position: relative;
			width:100%;
			height:100%;
		}
		body{
			background: url("http://static.hdslb.com/message/img/infocenterbg.jpg") center top no-repeat fixed !important;
		}
		.top_container{
			position: relative;
			z-index: 10000;
			background:#fff;
			width:100%;
			height:42px;
			color:#222;
			box-shadow: rgba(0,0,0,0.1) 0 1px 2px;
		}
		.content{
			max-width: 960px;
			height:100%;
			margin:0 auto;
		}
		.content .top_nav{
			float:left;
			height:42px;
		}
		.content .top_box{
			float:right;
			height:42px;
		}
		ul{
			list-style: none;
			display: block;
		}
		ul li{
			list-style-type: none;
			display: list-item;
			float: left;
		}
		.menu{
			line-height: 42px;
			height:42px;
		}

		.menu .item{
			height:42px;
			text-align: center;
		}

		.menu .item .i-link{
			display: block;
			width:60px;
			height:42px;
			font-size: 13px;
			letter-spacing: .2px;
			transition: all .5s ease;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
		}
		.menu .item .i-link:hover{
			background: #00a1d6;
			color: white;
			text-decoration: none;
			cursor: pointer;
		}
		.message-left{
			width:140px;
			position:fixed;
			top:0;
			background:rgba(255,255,255,.8);
			height:100%;
		}
		.left-head{
			width:140px;
			height:112px;
			color:#222;
			font-size: 14px;
			padding-top: 60px;
			font-weight:700;
			text-align: center;
		}

		.message_page_lists {
		    overflow: hidden;
		}

		.message_page_lists .active a span ,.message_page_list:hover span {
			color: #00a1d6;
		}
		.message_page_list{
			width: 140px;
			height:40px;
			line-height: 40px;
			cursor: pointer;
			position: relative;
			transition: all .5s ease;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
		}

		.message_page_list a {
		    display: block;
		    padding-left: 20px;
		}

		.message_page_list a span{
			display: inline-block;
		    width: 85px;
		    margin-right: 30px;
		    color: #6d757a;
		    font-size: 14px;
		    font-weight: 700;
		}
		.message-right{
			width: 820px;
			height:100%;
			float: right;
			padding:10px;
			background-color: rgba(255,255,255,.5);
		}
		.message-title{
			border-radius: 1px;
			background: #fff;
			height:42px;
			line-height: 42px;
			padding-left: 16px;
			font-size:15px;
			color:#6d757a;
			font-weight: 700;
			box-shadow: 1px 0px 1px #b8c0cc;
		}
		.message-main-lists{
			margin-top: 10px;
		}
		.message-main-lists .message-main-list{
			width:100%;
			margin-bottom:10px;
			background-color: #fff;
			min-height: 50px;
			padding:30px 0px;
			box-shadow: 0px 1px 1px 1px rgba(0,0,0,.1);
		}
		.no-data{
			width: 256px;
    		height: 256px;
    		margin: 0 auto;
    		background: url(http://static.hdslb.com/message/img/nodata.png) no-repeat;
		}
		.message-main-infor{
			width: 740px;
    		padding: 0 16px;
    		font-size: 12px;
    		font-weight: 700;
    		margin-bottom: -6px
		}

		.message-main-head{
			color:#222;
			word-wrap: break-word;
		}

		.time{
		    color: #b8c0cc;
    		font-size: 12px;
    		line-height: 22px;
    		margin-left: 10px;
		}
		.message-main-bottom{
			font-weight: 400;
   			color: #6d757a;
    		padding-left: 8px;
    		word-wrap: break-word;
		}
		.i_menu{
			position: absolute;
			top:48px;
			display: none;
			transition: all .5s ease;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            background:#fff; 
            box-shadow: rgba(0,0,0,0.16) 0 2px 4px;
		}
		.i_menu #arrow {
			width:100px;
			font-size: 14px;
			float:inherit;
			overflow: hidden;
			background-color:white; 
			filter:alpha(opacity=0);

		}
		.i_menu .infor {
			width:100px;
			font-size: 14px;
			height:30px;
			line-height: 30px;
			color:#222;
			float:inherit;
			transition: all .5s ease;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
		}
		.i_menu .infor:hover,.i_menu .infor:hover span{
			color: #00a1d6;
			background: #eee;
		}
		.menu .item .i-link:hover .i_menu,.menu .item .i-link:hover .arrow-wrap{
			display: block;
		}
		.arrow-wrap{
			width:100px;
			height:15px;
			display: none;
		}
		.arrow{
			position: fixed;
			top:42px;
			width:15px;
			height:15px;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);		/* IE 9 */
			-webkit-transform: rotate(45deg);	/* Safari and Chrome */
			-o-transform: rotate(45deg);		/* Opera */
			-moz-transform: rotate(45deg);
			margin-top:3px;
			margin-bottom:-7px;
			margin-left:22px;
			background: #fff;

		}
	</style>
</head>
<body>
<div class="top_container">
	<div class="content">
		<div class="top_nav">
			<ul class="menu">
				<li class="item"><a class="i-link">主站</a></li>
				<li class="item"><a class="i-link">画友</a></li>
				<li class="item"><a class="i-link">游戏中心</a></li>
				<li class="item"><a class="i-link">直播</a></li>
				<li class="item"><a class="i-link">周边</a></li>
				<li class="item"><a class="i-link">BML</a></li>
			</ul>
		</div>
		<div class="top_search"></div>
		<div class="top_box">
			<ul class="menu">
				<li class="item">
					<a class="i-link">
					消息
					<div class="arrow-wrap"><div class="arrow"></div></div>
					<ul class="i_menu">
						<!-- <li id="arrow"></li> -->
						<li class="infor"><span>回复我的</span></li>
						<li class="infor"><span>@我的</span></li>
					</ul>
					</a>
				</li>
				<li class="item">
					<a class="i-link">动态</a>
				</li>
				<li class="item">
					<a class="i-link">收藏夹</a>
				</li>
				<li class="item">
					<a class="i-link">历史</a>
				</li>
				<li class="item">
					<a class="i-link">投稿</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="content">
	<div class="message-left">
		<div class="left-head">消息中心</div>
		<ul class="message_page_lists">
			<li class="message_page_list active"><a><span>●&nbsp;&nbsp;回复我的</span></a></li>
			<li class="message_page_list"><a><span>●&nbsp;&nbsp;@我的</span></a></li>
			<li class="message_page_list"><a><span>●&nbsp;&nbsp;收到的赞</span></a></li>
			<li class="message_page_list"><a><span>●&nbsp;&nbsp;系统通知</span></a></li>
			<li class="message_page_list"><a><span>●&nbsp;&nbsp;我的私信</span></a></li>
		</ul>
	</div>
	<div class="message-right">
		<div class="message-main">
			<div class="message-title">回复我的</div>
			<ul class="message-main-lists">
				<li class="message-main-list">
					<div class="no-data"></div>
				</li>
				<li class="message-main-list">
					<div class="message-main-infor">
						<div class="message-main-head">生活、音乐、时尚区分区变更通知 <span class="time">2016-07-12 19:10:00</span></div>
						<div class="message-main-bottom">为优化站内分区的精准性，7月13日凌晨1点30分，生活区将新增三个二级分区：运动、手工、绘画。原二级分区“日常”中的绘画类视频和 “野生技术协会”中的手工类视频，将分别移至新的“绘画”和“手工”分区。音乐区将新增“原创音乐”分区，专注原创歌曲及原创纯音乐。同时取消“同人音乐”分区，该分区下的历史稿件将分拆至“原创音乐”及其他分区。原时尚区的二级分区 “美妆健身”将拆分为“美妆”和“健身”两个分区。请各位用户使用网站时要留意各分区的变动信息哦~(°∀°)ﾉ</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>	
</body>
</html>

